<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search_container">
			<view class="search_input">
				<view class="iconfont icon-RectangleCopy serach_icon"></view>
				<input placeholder="输入商品名" v-model="keyword"/>
			</view>
			<view class="search_btn" @click="search">搜索</view>
		</view>
		<!-- 商品列表 -->
		<view class="products_container">
			<product 
			v-for="(item, index) in products" 
			:key="index"
			:goods_id="item.goods_id"
			:goods_name="item.goods_name">
			</product>
		</view>
	</view>
</template>

<script>
	import Product from '@/components/Product.vue'
	export default {
		data() {
			return {
				keyword: '',
				products: [],
			}
		},
		methods: {
			async search() {
				const [error, res] = await uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch',
					data: { query: this.keyword }
				})
				this.products = res.data.message;
			}
		},
		components: {
			Product
		}
	}
</script>

<style lang="less">
	.container {
		.search_container {
			height: 61rpx;
			display: flex;
			justify-content: space-between;
			margin: 15rpx 18rpx;
			.search_input {
				flex: 1;
				background-color: #E7E7E7;
				border-radius: 27rpx;
				font-size: 25rpx;
				padding-left: 57rpx;
				display: flex;
				align-items: center;
				position: relative;
				.serach_icon {
					position: absolute;
					left: 15rpx;
					top: 16rpx;
				}
			}
			.search_btn {
				background-color: #EA4350;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 25rpx;
				width: 101rpx;
				color: #fff;
				margin-left: 15rpx;
			}
		}
	}
</style>